<template>
  <div>
    <Category></Category>
    <el-card
      :body-style="{ padding: '20px' }"
      size="default"
      shadow="alawys"
      style="margin-top: 10px"
    >
      <div v-show="scene == 0">
        <!-- 添加属性 -->
        <el-button
          :icon="Plus"
          type="primary"
          style="margin-bottom: 10px"
          @click="addAttr"
          :disabled="!categoryStore.c3Id"
          >添加属性</el-button
        >
        <!-- table -->
        <el-table border stripe :data="attrList">
          <el-table-column label="序号" width="80" align="center" type="index">
          </el-table-column>
          <el-table-column label="属性名称" width="120" prop="attrName">
          </el-table-column>
          <el-table-column label="属性值列表" prop="">
            <template #="{ row, $index }">
              <el-tag
                style="margin: 0px 3px"
                class="ml-2"
                :type="attrVal.id % 2 == '0' ? 'success' : 'warning'"
                v-for="(attrVal, index) in row.attrValueList"
                :key="attrVal.id"
                >{{ attrVal.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template #="{ row, $index }">
              <el-button type="warning" size="small" :icon="Edit" @click="removeAttr(row)"></el-button>
              <el-button type="danger" size="small" :icon="Delete" @click="deleteAttr(row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-show="scene == 1">
        <!-- 添加属性修改属性结构 -->
        <el-form ref="form" :inline="true">
          <el-form-item label="属性名">
            <el-input
              placeholder="请输入你的属性"
              size="normal"
              clearable
              v-model="attrParams.attrName"
            ></el-input>
            <!--  -->
          </el-form-item>
        </el-form>
        <el-button
          type="primary"
          :icon="Plus"
          @click="addAttrValue"
          :disabled="!attrParams.attrName"
          >添加属性值</el-button
        >
        <el-button @click="cancel">取消</el-button>
        <!-- 将来表格展示属性值的地方 -->
        <el-table
          border
          stripe
          style="margin: 10px 0px"
          :data="attrParams.attrValueList"
        >
          <el-table-column type="index" align="center" width="80" label="序号">
          </el-table-column>
          <el-table-column label="属性值">
            <template #="{ row, $index }">
              <el-input
                placeholder="请输入属性值"
                size="small"
                v-model="row.valueName"
                :ref="(vc) => (inputArr[$index] = vc)"
                @blur="toLook(row, $index)"
                v-if="row.flag"
              ></el-input>
              <div v-else @click="toEdit(row, $index)">{{ row.valueName }}</div>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #="{ row, $index }">
              <el-button
                type="danger"
                size="small"
                :icon="Delete"
                @click="attrParams.attrValueList.splice($index, 1)"
              ></el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-button
          type="primary"
          @click="save"
          :disabled="attrParams.attrValueList.length > 0 ? false : true"
          >保存</el-button
        >
        <el-button @click="cancel">取消</el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { watch, onMounted, ref, reactive, nextTick } from "vue";
import { reqAttrList, reqAddOrUpdateAttr,reqDeleteAttr } from "@/api/product/attr/attr";
import {
  Check,
  Delete,
  Edit,
  Message,
  Search,
  Star,
  Plus,
  UploadFilled,
} from "@element-plus/icons-vue";
//引入仓库
import useCategoryStore from "@/stores/category";
let categoryStore = useCategoryStore();
import { ElMessage } from "element-plus";
//引入loash拷贝数据
import _ from "lodash"
//存储平台的数据
let attrList = ref([]);
// 定义场景切换
let scene = ref<number>(0);
//定义数组ref类型数据，将来存储el-input组件的实例
let inputArr = ref([]);
// 将来添加属性的参数
let attrParams = reactive({
  attrName: "", //新增|修改以后属性名字
  attrValueList: [],
  categoryId: "", //代表平台属性归属于手机这个三级分类下的
  categoryLevel: 3, //几级分类
});
//监听
watch(
  () => categoryStore.c3Id,
  () => {
    if (categoryStore.c3Id == "") return;
    //发送请求
    getAttrList();
  }
);
//获取商品属性的方法
const getAttrList = async () => {
  let result = await reqAttrList(
    categoryStore.c1Id,
    categoryStore.c2Id,
    categoryStore.c3Id
  );
  attrList.value = result;
};
// 添加属性按钮的回调
const addAttr = () => {
  scene.value = 1;
  //拷贝数据
  Object.assign(attrParams, {
    attrName: "", 
    attrValueList: [],
    categoryId: categoryStore.c3Id,
    categoryLevel: 3, 
  });
};
// 添加属性值的回调
const cancel = () => {
  scene.value = 0;
};

// 添加属性按钮的回调
const addAttrValue = () => {
  attrParams.attrValueList.push({
    valueName: "",
    flag: true,
  });
};
//row:即为添加属性值对象
const toLook = (row, $index) => {
  //属性值一些非法情况需要判断---属性值为空
  if (row.valueName.trim() == "") {
    ElMessage({
      type: "warning",
      message: "亲爱的属性值不能为空",
    });
    //属性值数组把当前非法属性值对象干掉
    attrParams.attrValueList.splice($index, 1);
    return;
  }
  //属性值重名
  let repeat = attrParams.attrValueList.find((item) => {
    if (row != item) {
      return row.valueName === item.valueName;
    }
  });
  //如果出现重复
  if (repeat) {
    ElMessage({
      type: "warning",
      message: `${repeat.valueName}重复?`,
    });
    // 属性值把当前数值干掉
    attrParams.attrValueList.splice($index, 1);
    return;
  }
  row.flag = false;
};
//编辑状态
const toEdit = (row, $index) => {
  row.flag = true;
  //点击div切换显示el-input，需要聚焦
  nextTick(() => {
    inputArr.value[$index].focus();
    // inputArr[$index]
  });
};
//保存按钮回调
const save = async () => {
  //整理参数,去掉flag
  attrParams.attrValueList=attrParams.attrValueList.map((item)=>{
   return {
    valueName:item.valueName
   }
  })
  try {
    await reqAddOrUpdateAttr(attrParams);

    //切换到添加属性
    scene.value = 0;
    ElMessage({
      type: "success",
      message: attrParams.id ? "修改成功" : "hhhd ",
    });
    //获取全新属性
    getAttrList();
  } catch (error) {
    ElMessage({
      type: "error",
      message: attrParams.id ? "修改失败" : "添加成功",
    });
  }
};
//修改按钮的回调
const removeAttr=async (row)=>{
try {
  scene.value=1
  Object.assign(attrParams,_.cloneDeep(row))
//  await reqRemoveAttr(row.id)
} catch (error) {
  
}

}
//删除按钮的回调
const deleteAttr=async (row)=>{
 try {
  await reqDeleteAttr(row.id)
  ElMessage({
      type: "success",
      message: "删除成功",
    });
  //获取全新属性
  getAttrList();
 } catch (error) {
  ElMessage({
      type: "success",
      message: "删除失败",
    });
 }

}
</script>

<style scoped>
</style>